﻿@page "/"
@page "/upload"

@inject IJSRuntime JS
@inject ILogger _logger
@inject ISnackbar _snackbar
@inject NavigationManager _nav
@inject IHttpContextAccessor _accessor
@inject PluginsContext _pluginsContext

@using North.Common
@using North.Core.Models
@using North.Events.PasteMultimediaEvent
@using North.RCL.Texts

<AuthorizeView Roles="User,System">
    <div class="mud-height-full" id="upload-mid-stack">
        <MudPaper @ondragenter="@SetDragClass" @ondragleave="@ClearDragClass" @ondragend="@ClearDragClass"
                  Outlined Style="height:50%; min-height:350px; margin-top:20%;" Class="@DragClass">
            @if (!Clearing)
            {
                <InputFile OnChange="@OnInputImagesChanged" multiple accept="image/*" Class="absolute mud-width-full mud-height-full overflow-hidden z-20" Style="opacity:0;" />
            }
            <MudStack Class="d-flex mud-width-full mud-height-full z-10 align-center justify-center">
                <MudIcon Icon="@Icons.Material.Outlined.CloudUpload" Style="width:100px; height:100px;" />
                <MudText Typo="Typo.h6" Style="user-select:none;">点击或拖拽图片至此处上传</MudText>
            </MudStack>
        </MudPaper>
        <div class="d-flex flex-row justify-space-between gap-3 mt-4">
            <MudButton Variant="Variant.Filled" Color="Color.Tertiary" StartIcon="@Icons.Material.Outlined.FileUpload" 
                       OnClick="UploadAllImages" Disabled="!Images.Any(i => i.State is ImageUploadState.UnStart or ImageUploadState.Failed)">上传全部</MudButton>
            <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Outlined.Clear" 
                       OnClick="ClearAllImages" Disabled="!Images.Any(i => i.State is not ImageUploadState.Uploading)">清空列表</MudButton>
            <MudButton Variant="Variant.Filled" Color="Color.Warning" StartIcon="@Icons.Material.Outlined.Lock"
                       Disabled="Images.Any(i => i.State is ImageUploadState.Uploading)">访问权限</MudButton>
            <MudMenu ActivationEvent="@MouseEvent.MouseOver" 
                     AnchorOrigin="Origin.CenterRight" TransformOrigin="Origin.TopLeft">
                <ActivatorContent>
                    <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Outlined.ContentCopy">链接格式</MudButton>
                </ActivatorContent>
                <ChildContent>
                    <MudList Clickable @bind-SelectedValue="@UrlType">
                        <MudListItem Value="ImageUrlType.Markdown" Style="height:40px; color:gray;">
                            <IconfontText Icon="icon-file-markdown" Text="Markdown" Color="#B0BEC5" />
                        </MudListItem>
                        <MudListItem Value="ImageUrlType.Url" Style="height:40px; color:gray;">
                            <IconfontText Icon="icon-URLScheme" Text="Url" Color="#81C784" />
                        </MudListItem>
                        <MudListItem Value="ImageUrlType.Html" Style="height:40px;">
                            <IconfontText Icon="icon-html" Text="Html" Color="#E1A983" />
                        </MudListItem>
                        <MudListItem Value="ImageUrlType.UBB" Style="height:40px;">
                            <IconfontText Icon="icon-14" Text="UBB" Color="#2196F3" />
                        </MudListItem>
                    </MudList>
                </ChildContent>
            </MudMenu>
        </div>
        @foreach (var image in Images)
        {
            <MudPaper Outlined Square Class="mud-width-full mb-4 mt-4">
                <MudStack Row Class="mud-width-full">
                    <MudAvatar Square Style="width:50px; height:50px;">
                        <MudImage Src="@image.PreviewUrl" />
                    </MudAvatar>
                    <MudStack Spacing="0" Class="mud-width-full">
                        <MudText Style="user-select:none;">@image.Name</MudText>
                        <MudText Class="d-flex mud-width-full align-center" Style="user-select:none;">@($"{image.Length / (1024.0 * 1024.0):f2} MB, {image.Message}")</MudText>
                    </MudStack>
                    <MudStack Row Spacing="1" Class="d-flex mud-height-full  align-center" Style="width:fit-content;">
                        <MudIconButton Icon="@Icons.Material.Outlined.FileUpload" Color="Color.Tertiary"
                                OnClick="@(() => UploadImageAsync(image))" Disabled="@(image.State is ImageUploadState.Success or ImageUploadState.Uploading)"></MudIconButton>
                    <MudIconButton Icon="@Icons.Material.Outlined.Clear" Color="Color.Error"
                                OnClick="@(() => ClearImageAsync(image))" Disabled="@(image.State is ImageUploadState.Uploading)"></MudIconButton>
                    <MudIconButton Icon="@Icons.Material.Outlined.ContentCopy" Color="Color.Info"
                                OnClick="@(() => CopyImageUrlAsync(image))" Disabled="@(image.State is not ImageUploadState.Success)"></MudIconButton>
                    </MudStack>
                </MudStack>
                <MudProgressLinear Color="@image.ProgressColor" Size="Size.Small" Value="@image.Progress" Class="mud-width-full" />
            </MudPaper>
        }
    </div>
</AuthorizeView>

<style>
    #upload-mid-stack {
        width:90%;
        max-width:600px;
        left:0;
        right:0;
        margin:auto;
        overflow:scroll;
    }

    #upload-mid-stack::-webkit-scrollbar {
        display: none;
    }
</style>